Web Performance API：测量计时以实现卓越用户体验

在当今的数字时代，一个快速响应的网站不再是奢侈品，而是必需品。用户期望无缝的体验，即使是轻微的延迟也可能导致挫败感、购物车被放弃，并最终导致收入损失。Web Performance API为开发人员提供了精确测量网站性能各个方面的工具，使他们能够识别瓶颈并优化用户体验(UX)。

理解用户体验指标的重要性

在深入探讨API的技术细节之前，理解为什么UX指标如此重要至关重要。它们提供了一种可量化的方法来评估用户如何感知您网站的速度和响应能力。糟糕的UX会对以下方面产生负面影响：

• 跳出率：加载时间过慢通常会导致用户在与内容互动之前就离开您的网站。
• 转化率：令人沮丧的用户体验可能会阻止潜在客户完成交易。
• 搜索引擎排名：像Google这样的搜索引擎会优先考虑性能良好的网站，这会影响您在搜索结果中的可见度。严重依赖性能API的核心Web指标(Core Web Vitals)是一个排名因素。
• 品牌认知：一个缓慢的网站会给您的品牌留下负面印象，表明其缺乏对细节的关注和糟糕的用户体验。

关键的Web Performance API和指标

有多种Web Performance API可用，每种API都提供了对网站性能不同方面的独特见解。以下是一些最重要的API：

1. 导航计时API (Navigation Timing API)

Navigation Timing API提供了与文档加载相关的详细计时信息。它允许您测量加载过程各个阶段所花费的时间，例如：

• navigationStart: 浏览器开始获取文档之前的即时时间戳。
• fetchStart: 浏览器开始从网络获取文档之前的即时时间戳。
• domainLookupStart: 浏览器开始对文档域名进行DNS查询之前的即时时间戳。
• domainLookupEnd: 浏览器完成DNS查询之后的即时时间戳。
• connectStart: 浏览器开始与服务器建立连接之前的即时时间戳。
• connectEnd: 浏览器完成与服务器建立连接之后的即时时间戳。
• requestStart: 浏览器发送文档的HTTP请求之前的即时时间戳。
• responseStart: 浏览器接收到HTTP响应的第一个字节之后的即时时间戳。
• responseEnd: 浏览器接收到完整的HTTP响应之后的即时时间戳。
• domLoading: 浏览器将document.readyState设置为"loading"之前的即时时间戳。
• domInteractive: 浏览器解析完HTML文档且DOM准备就绪之后的即时时间戳。
• domContentLoadedEventStart: 浏览器触发DOMContentLoaded事件之前的即时时间戳。
• domContentLoadedEventEnd: 浏览器触发DOMContentLoaded事件之后的即时时间戳。
• domComplete: 浏览器将document.readyState设置为"complete"之后的即时时间戳。
• loadEventStart: 浏览器触发load事件之前的即时时间戳。
• loadEventEnd: 浏览器触发load事件之后的即时时间戳。

示例：计算DNS查询所花费的时间：

            const navigationTiming = performance.getEntriesByType("navigation")[0];
const dnsLookupTime = navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart;
console.log(`DNS Lookup Time: ${dnsLookupTime} ms`);
            

              
                Copy
              
            
          

2. 资源计时API (Resource Timing API)

Resource Timing API为网页加载的单个资源（如图片、CSS文件、JavaScript文件和字体）提供详细的计时信息。此API帮助您识别哪些资源加载时间最长并优化其交付。

关键指标：

• name: 资源的URL。
• startTime: 浏览器开始获取资源的时间戳。
• responseEnd: 浏览器接收到资源最后一个字节的时间戳。
• duration: 加载资源所花费的总时间 (responseEnd - startTime)。
• transferSize: 通过网络传输的资源大小。
• encodedBodySize: 压缩前的资源大小。
• decodedBodySize: 解压后的资源大小。

示例：识别页面上最大的图片：

            const resourceTiming = performance.getEntriesByType("resource");

let largestImage = null;
let largestImageSize = 0;

resourceTiming.forEach(resource => {
  if (resource.initiatorType === "img" && resource.transferSize > largestImageSize) {
    largestImage = resource.name;
    largestImageSize = resource.transferSize;
  }
});

console.log(`Largest Image: ${largestImage}, Size: ${largestImageSize} bytes`);
            

              
                Copy
              
            
          

3. 用户计时API (User Timing API)

User Timing API允许您定义自定义性能指标，并测量特定代码块或用户交互所花费的时间。这对于跟踪关键JavaScript函数或复杂UI组件的性能特别有用。

关键方法：

• performance.mark(markName): 创建一个带有指定名称的时间戳。
• performance.measure(measureName, startMark, endMark): 在两个标记之间创建一个性能测量。
• performance.getEntriesByType("measure"): 检索所有性能测量。

示例：测量渲染一个复杂的React组件所需的时间：

            performance.mark("componentRenderStart");

// Code to render the React component
render(, document.getElementById("root"));

performance.mark("componentRenderEnd");
performance.measure("componentRenderTime", "componentRenderStart", "componentRenderEnd");

const renderTime = performance.getEntriesByName("componentRenderTime")[0].duration;
console.log(`Component Render Time: ${renderTime} ms`);
            

              
                Copy
              
            
          

4. 长任务API (Long Tasks API)

Long Tasks API帮助您识别阻塞主线程超过50毫秒的任务。这些长任务可能导致UI卡顿并对用户体验产生负面影响。通过识别和优化这些任务，您可以提高网站的响应能力。

示例：将长任务记录到控制台：

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log("Long Task:", entry);
  });
});

observer.observe({ type: "longtask", buffered: true });
            

              
                Copy
              
            
          

5. 绘制计时API (Paint Timing API)

Paint Timing API公开了两个与网页视觉渲染相关的关键指标：

• 首次绘制 (First Paint, FP): 浏览器在屏幕上渲染第一个像素的时间。
• 首次内容绘制 (First Contentful Paint, FCP): 浏览器在屏幕上渲染第一块内容（例如，图片、文本）的时间。

这些指标对于理解用户感知您网站初始视觉反馈的速度至关重要。

示例：获取FCP：

            const paintTiming = performance.getEntriesByType("paint");
const fcpEntry = paintTiming.find(entry => entry.name === "first-contentful-paint");

if (fcpEntry) {
  console.log(`First Contentful Paint: ${fcpEntry.startTime} ms`);
}
            

              
                Copy
              
            
          

6. 最大内容绘制 (Largest Contentful Paint, LCP)

最大内容绘制 (LCP) 是一项核心Web指标，它测量视口中最大内容元素（例如，图片、视频、文本块）变为可见所需的时间。一个好的LCP分数表明页面的主要内容加载迅速，提供了更好的用户体验。

LCP的优化方向：

• 优化图片：使用适当的图片格式（例如，WebP），压缩图片，并使用响应式图片。
• 优化CSS：最小化和压缩CSS文件，避免阻塞渲染的CSS。
• 优化JavaScript：延迟非关键的JavaScript，避免长时间运行的JavaScript任务。
• 服务器响应时间：确保您的服务器能快速响应请求。

7. 累积布局偏移 (Cumulative Layout Shift, CLS)

累积布局偏移 (CLS) 是另一项核心Web指标，它测量网页的视觉稳定性。它量化了加载过程中发生的意外布局偏移量。一个低的CLS分数表明页面在视觉上是稳定的，提供了更愉快的用户体验。

导致布局偏移的原因：

• 没有尺寸的图片：始终为图片指定width和height属性。
• 没有预留空间的广告、嵌入内容和iframe：为这些元素预留空间，以防止它们引起布局偏移。
• 动态注入的内容：动态注入内容时要小心，因为它可能导致意外的布局偏移。
• 导致FOIT/FOUT的Web字体：优化字体加载，以最大限度地减少不可见文本闪烁(FOIT)和无样式文本闪烁(FOUT)的影响。

8. 下次绘制交互 (Interaction to Next Paint, INP)

下次绘制交互 (INP) 是一项核心Web指标，用于衡量网页对用户交互的响应能力。它评估用户在访问页面期间进行的所有点击、轻触和键盘交互的延迟。INP 将于2024年3月取代首次输入延迟(FID)成为核心Web指标。

改善INP：

• 优化JavaScript执行：将长任务分解为更小的异步块，以避免阻塞主线程。
• 延迟非关键JavaScript：仅加载初始渲染所需的JavaScript，并延迟其余部分。
• 使用Web Workers：将计算密集型任务卸载到Web Workers，以防止它们阻塞主线程。
• 优化事件处理程序：确保事件处理程序是高效的，并避免执行不必要的操作。

实践示例和代码片段

以下是一些如何使用Web Performance API来测量和优化网站性能的实践示例：

示例1：测量页面加载时间

            window.addEventListener("load", () => {
  const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
  console.log(`Page Load Time: ${loadTime} ms`);
});
            

              
                Copy
              
            
          

示例2：识别加载缓慢的资源

            const resourceTiming = performance.getEntriesByType("resource");

resourceTiming.forEach(resource => {
  if (resource.duration > 1000) {
    console.warn(`Slow Resource: ${resource.name}, Duration: ${resource.duration} ms`);
  }
});
            

              
                Copy
              
            
          

示例3：测量可交互时间 (TTI) - 近似值

注意：TTI是一个复杂的指标，这只是一个简化的近似值。真正的TTI需要更复杂的方法。

            function getTimeToInteractive() {
  return new Promise(resolve => {
    if (document.readyState === 'complete') {
      resolve(performance.now());
    } else {
      window.addEventListener('load', () => {
        resolve(performance.now());
      });
    }
  });
}

getTimeToInteractive().then(tti => {
  console.log(`Approximate Time to Interactive: ${tti} ms`);
});
            

              
                Copy
              
            
          

优化用户体验的可行见解

一旦您使用Web Performance API收集了性能数据，您可以使用以下可行见解来优化您网站的用户体验：

• 优化图片：压缩图片，使用适当的图片格式（例如，WebP），并使用响应式图片以减少图片加载时间。
• 最小化和压缩代码：最小化和压缩HTML、CSS和JavaScript文件，以减小其大小并提高加载时间。
• 利用浏览器缓存：配置您的服务器设置适当的缓存头，以启用静态资源的浏览器缓存。
• 使用内容分发网络 (CDN)：将您网站的内容分布在地理位置不同的多个服务器上，以减少不同地区用户的延迟。流行的CDN提供商包括Cloudflare、Akamai和Amazon CloudFront。
• 优化字体加载：使用font-display: swap来防止字体阻塞，并提高您网站的感知加载速度。
• 减少HTTP请求：通过合并CSS和JavaScript文件、内联关键CSS和使用CSS精灵来最小化HTTP请求的数量。
• 延迟非关键资源：延迟加载非关键资源，如图片和JavaScript文件，直到初始页面加载之后。
• 优化服务器响应时间：通过优化您的服务器端代码和数据库查询，确保您的服务器快速响应请求。
• 定期监控性能：使用Web Performance API和其他性能监控工具持续监控您网站的性能，以识别和解决任何性能问题。像Google PageSpeed Insights、WebPageTest和Lighthouse这样的工具可以提供宝贵的见解。

性能监控工具和库

有多种工具和库可以帮助您使用Web Performance API监控和分析网站性能：

• Google PageSpeed Insights：一个免费工具，用于分析您网站的性能并提供改进建议。
• WebPageTest：一个免费工具，允许您从不同地点和浏览器测试您网站的性能。
• Lighthouse：一个开源的自动化工具，用于提高网页质量。它有针对性能、可访问性、渐进式Web应用、SEO等方面的审计。
• New Relic：一个全面的性能监控平台，提供对网站性能的实时洞察。
• Datadog：一个监控和分析平台，提供对您整个基础设施（包括网站性能）的可见性。
• Sentry：一个实时错误跟踪和性能监控平台。
• Web Vitals Chrome Extension：一个Chrome扩展程序，可实时显示核心Web指标。

针对全球受众的考量

在为全球受众优化网站性能时，考虑以下因素非常重要：

• 地理位置：使用CDN将您的内容分布在地理位置不同的多个服务器上，减少不同地区用户的延迟。
• 网络条件：通过使用图片压缩、代码最小化和浏览器缓存等技术，为网络连接缓慢或不可靠的用户优化您的网站。
• 设备能力：通过使用响应式设计和自适应加载技术，为包括手机、平板电脑和台式机在内的不同设备优化您的网站。
• 语言和本地化：确保您的网站针对不同语言和地区进行本地化，包括翻译内容和调整不同文本方向的布局。
• 可访问性：通过遵循WCAG等可访问性指南，确保您的网站对残障用户是可访问的。

结论

Web Performance API为测量和优化网站性能提供了宝贵的工具。通过理解和利用这些API，开发人员可以识别性能瓶颈，改善用户体验，并最终推动业务成功。请记住，将核心Web指标（LCP、CLS和INP）作为衡量网站整体健康和用户满意度的关键指标。通过持续监控和优化您网站的性能，您可以确保为全球用户提供快速、响应迅速且引人入胜的体验。